<template>
  <div class="product-list">
    <header>
      <van-nav-bar 
        fixed
        @click-left="onClickLeft">
        <template #left>
          <van-icon name="arrow-left" color="#000" size="20"/>
        </template>
        <template #title>
          <van-search v-model="productName" style="padding: 0;" shape="round" placeholder="请输入搜索关键词" />
        </template>
        <template #right>
          <van-button 
            type="info" 
            @click="search"
            color="linear-gradient(to right, #ff6034, #ee0a24)"
          >搜索</van-button>
        </template>
      </van-nav-bar>
    </header>
    
    <div class="block"></div>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多啦"
        @load="load_more"
        class="publist"
      >
        <div class="product-item" v-for="item in productList" :key="item.id">
          <div class="product-item_inner" @click="toProductInfo(item.id)">
            <div class="product-cover">
              <img :src="item.coverImg" :alt="item.name" class="photo">
            </div>
            <div class="product-info">
              <p class="name">{{ item.name }}</p>
              <p class="subtitle">{{ item.subTitle }}</p>
              <span class="price"> &yen;{{ item.price }}</span>
            </div>
          </div>
        </div>
      </van-list>
  </div>
</template>

<script>

import { getProductList } from '@/api/product'
export default {
  name: "productList",
  data() {
    return {
      productList: [],
      pageNum: 1,
      pageSize: 5,
      finished: false,//是否加载
      loading: false,//加载状态
      categoryId: this.$route.query.categoryId,
      productName: this.$route.query.productName,
      value1: 0,
      value2: 'a',
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    onLoad() {
      getProductList({categoryId: this.categoryId,productName: this.productName, pageNum: this.pageNum, pageSize: this.pageSize}).then(res => {
        if(res.code === 200) {
          this.loading = false;
          this.productList = this.productList.concat(res.data.records);
          if(res.data.records.pages == res.data.pageNum  || res.data.records.length == 0) {
            this.finished = true;
          } else {
            this.finished = false;
          }
        }
      })
    },
    load_more() {
      this.pageNum += 1;// 页数+1
      this.onLoad();
    },
    toProductInfo(id) {
      this.$router.push({
        path: '/product',
        query: {
          productId: id
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    search() {
      this.pageNum = 1
      this.productList = []
      this.onLoad()
    }
  }
}
</script>

<style lang="scss" scoped>
  .product-list {
    :deep() .van-button {
      height: 30px;
      border-radius: 5px;
    }
    :deep() .van-nav-bar__title {
      margin-left: 50px;
      width: 65%;
      max-width: 65%;
      margin-right: 80px;
    }
    :deep() .van-nav-bar__right {
      padding: 0;
      padding-right: 15px;
      
    }
    .block {
        height: 50px;
      }
    .product-item{
      display: block;
      position: relative;
      padding: 5px 0 5px 10px;
      background-color: #fff;
      .product-item_inner {
      position: relative;
      padding-left: 120px;
      
      .product-cover {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        width: 120px;
        height: 120px;
        // .photo {
          
        // }
        img {
          margin: auto;
          // width: 100%;
          height: 100%;
          background: #fff;
        }
      }
      .product-info {
        min-height: 120px;
        padding-bottom: 8px;
        box-sizing: border-box;
        padding: 0 10px;
        overflow: hidden;
        line-height: 1;
        text-align: left;
        .name {
          width: 100%;
          margin: 0;
          margin-top: 10px;
          max-height: 50px;
          line-height: 20px;
          font-size: .4rem;
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .subtitle {
          width: 100%;
          margin: 0;
          max-height: 0.53333rem;
          padding: 0.26667rem 0;
          line-height: .66667rem;
          font-size: .34667rem;
          color: #999;
          overflow: hidden;
        }
        .price {
          color: #e4393c;
          font-size: .42667rem;
        }
        
      }
    }
    }
    .product-item:not(:first-child)::after{
      -webkit-transform: scaleY(.5);
      -webkit-transform-origin: 50% 0;
      content: "";
      position: absolute;
      pointer-events: none;
      background-color: #e5e5e5;
      height: 1px;
      right: 0;
      top: 0;
      left: 130px;
      z-index: 4;
    }
  }
</style>